<template>
  <div>
    <!-- 退残单明细 -->
    <el-dialog
      v-el-drag-dialog
      :title="`退残单明细：${titleName}`"
      :visible.sync="visible"
      width="1024px"
      height="600px"
    >
      <div class="center">
        <!-- 描述列表 -->
        <el-descriptions size="medium" style="margin-top: 20px;">
          <el-descriptions-item label="退残机构">{{ temp.orgName }}</el-descriptions-item>
          <el-descriptions-item label="退残人">{{ temp.targetUser }}</el-descriptions-item>
          <el-descriptions-item label="退残时间">{{ dayjs(temp.happendTime).format("YYYY-MM-DD HH:mm") }}</el-descriptions-item>
          <el-descriptions-item label="退残顾客">{{ temp.csmName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ temp.csmPhone }}</el-descriptions-item>
          <el-descriptions-item label="地址" label-class-name="addressLabel" content-class-name="addressContent">{{ temp.csmAddress }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ temp.remark }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions size="medium" style="margin-bottom: 30px;">
          <el-descriptions-item label="支付方式">{{ temp.paymentMethod }}</el-descriptions-item>
        </el-descriptions>

        <!-- 表格1 -->
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">退残商品列表</span>
          </div>
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="column"
            :data="tableData.data"
            :total="tableData.total"
            custom-column
            show-summary
            :summary-method="getSummariesRecycle"
            align="center"
          />
        </div>
      </div>

      <!-- 红字 -->
      <div class="red mt50">
        <div class="red01">
          费用金额：{{ cost }}
        </div>
        <div>
          费用金额 =  - 退残合计 ，正数表示收入，负数表示支出
        </div>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dayjs from 'dayjs'
  import { queryRecycleOrderDetailTc, queryMap } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  export default {
    name: 'recallOrderDetails',
    data() {
      return {
        paymentMethodMap: [
          { value: 1, label: '现金' },
          { value: 16, label: '月结' },
          { value: 2, label: '微信' },
          { value: 128, label: '支付宝' },
          { value: 256, label: '预付卡' }
        ],
        gdStatusMap: [],
        dayjs,
        visible: false,
        titleName: null,
        temp: [],
        tableData: {
          total: 0,
          data: []
        }
      }
    },
    computed: {
      // 费用金额
      cost: function() {
        const recycleAmount = this.temp.recycleGoodsList && this.temp.recycleGoodsList.reduce((pre, cur) => pre + cur.amount, 0)
        return (0 - (recycleAmount || 0)).toFixed(2)
      },
      column() {
        return [
          {
            type: 'index',
            index: this.indexMethod,
            width: 50
          },
          {
            prop: 'gtName',
            label: '商品类型',
            width: 150
          },
          {
            prop: 'goodsName',
            label: '商品名称',
            width: 150
          },
          {
            prop: 'specName',
            label: '规格型号',
            width: 150
          },
          {
            prop: 'unitName',
            label: '单位',
            width: 150
          },
          {
            prop: 'gdStatus',
            label: '状态',
            width: 150,
            render: (h, { row }) => {
              const arr = this.gdStatusMap.filter(item => item.value === row.gdStatus)
              if (arr.length) {
                return <span>{arr[0].desc}</span>
              } else {
                return ''
              }
            }
          },
          {
            prop: 'goodsCount',
            label: '退残数量'
          },
          {
            prop: 'netWeight',
            label: '退残重量'
          },
          {
            prop: 'price',
            label: '退残单价'
          },
          {
            prop: 'amount',
            label: '退残总价'
          },
          {
            prop: 'btNoIDS',
            label: '芯片号'
          },
          {
            prop: 'bottleCodes',
            label: '气瓶号'
          }
        ]
      }
    },
    methods: {
      open(temp) {
        this.temp = temp
        this.titleName = temp.billCode
        this.getDeaultData(temp)
        this.queryOptionsMap()
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getDeaultData(temp) {
        const res = await queryRecycleOrderDetailTc({ billCode: temp.billCode })
        this.temp = res.data
        if (this.temp.recycleGoodsList) {
          this.tableData.data = this.temp.recycleGoodsList
        } else {
          this.tableData.data = []
        }
        if (this.temp.paymentMethod) {
          const arr = this.paymentMethodMap.filter(item => item.value === this.temp.paymentMethod)
          if (arr.length) this.temp.paymentMethod = arr[0].label
        }
      },
      // 查询枚举
      async queryOptionsMap() {
        const res = await mergeAsyncFunc(queryMap, { enumName: 'GdStatus' })
        this.gdStatusMap = res.data // 商品状态
      },
      indexMethod(index) {
        return index + 1
      },
      // 合计方法
      getSummariesRecycle(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 2) {
            sums[index] = '合计'
            return
          }
          if (['gtId', 'specName', 'gdStatus', 'unitName', 'price'].includes(column.property)) {
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })
        if (!sums[6]) sums[6] = (0).toFixed(2) // 回收数量
        if (!sums[7]) sums[7] = (0).toFixed(2) // 回收重量
        sums[7] = Number(sums[7]).toFixed(2)
        sums[9] = sums[9] ? Number(sums[9]).toFixed(2) : (0).toFixed(2)
        return sums
      }
    }
  }
</script>

<style lang='scss' scoped>
.center {
  //   height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
}

.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}

.red {
  margin-top: 10px;
  color: red;

  .red01 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
  }
}
/deep/.addressLabel {
  display: inline-block;
  min-width: 32px !important;
}
.mt50 {
  margin-top: 50px !important;
}
</style>
